<template>
  <div v-if="hr">
    <el-card class="box-card" style="width: 400px">
      <div slot="header" class="clearFix">
        <span>{{hr.name}}</span>
      </div>
      <div>
        <div style="display: flex;justify-content: center">
          <el-upload :show-file-list=false
                     :on-success="onSuccess"
                     action="/hr/userFace"
                     :data="hr">
            <img title="点击修改用户头像" :src="hr.userFace" style="width: 100px;height: 100px;border-radius: 50px" alt="">
          </el-upload>
        </div>
        <div>
          电话号码:
          <el-tag>{{hr.telephone}}</el-tag>
        </div>
        <div>
          手机号码:
          <el-tag>{{hr.phone}}</el-tag>
        </div>
        <div>
          居住地址:
          <el-tag>{{hr.address}}</el-tag>
        </div>
        <div>
          用户标签:
          <el-tag type="success" style="margin-right: 5px" v-for="(role,index) in hr.roles" :key="index">
            {{role.nameZh}}
          </el-tag>
        </div>
        <div style="display: flex;justify-content: space-around;margin-top: 10px">
          <el-button type="primary" icon="el-icon-edit" @click="showUpdateHrInfoView">修改信息</el-button>
          <el-button icon="el-icon-edit" @click="showUpdatePasswordView">修改密码</el-button>
        </div>
      </div>
    </el-card>

    <el-dialog title="修改用户信息" :visible.sync="dialogVisible" width="30%">
      <div>
        <table>
          <tr>
            <td>
              <el-tag>用户昵称：</el-tag>
            </td>
            <td>
              <el-input v-model="hr2.name"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>电话号码：</el-tag>
            </td>
            <td>
              <el-input v-model="hr2.telephone"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>手机号码：</el-tag>
            </td>
            <td>
              <el-input v-model="hr2.phone"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>用户地址：</el-tag>
            </td>
            <td>
              <el-input v-model="hr2.address"></el-input>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="updateHrInfo">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "HrInfo",
    data() {
      return {
        hr: null,
        hr2: null,
        dialogVisible: false
      }
    },
    mounted() {
      this.initHr();
    },
    methods: {
      initHr() {
        this.getRequest('/hr/info').then(resp => {
          if (resp && resp.status === 200) {
            this.hr = resp.obj;
            this.hr2 = Object.assign({}, this.hr);
            window.sessionStorage.setItem("currentHr", JSON.stringify(resp));
            this.$store.commit('initCurrentHr', resp);
          }
        })
      },
      onSuccess() {
        this.initHr();
      },
      showUpdateHrInfoView() {
        this.dialogVisible = true;
      },
      updateHrInfo() {
        this.putRequest('/hr/info', this.hr2).then(resp => {
          if (resp && resp.status === 200) {
            this.dialogVisible = false;
            this.initHr();
          }
        });
      },
      showUpdatePasswordView() {
      },
    }
  }
</script>

<style scoped>

</style>
